<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
            <el-breadcrumb-item>成绩列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="24">
                <el-col :span="2" style="padding-right: 0">
                    <el-select v-model="queryInfo.keyword" placeholder="请选择">
                        <el-option label="学号" value="stu_id"></el-option>
                        <el-option label="姓名" value="name"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" style="padding-left: 0">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getScoreList">
                    </el-input>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">课程</el-button></el-col>
                <el-col :span="4">
                    <el-select v-model.number="queryInfo.course_id" placeholder="请选择" filterable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in courseList" :key="item.id" :label="item.course_name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black">学期</el-button></el-col>
                <el-col :span="6">
                    <el-select v-model.number="queryInfo.semester_id" placeholder="请选择" filterable>
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in semesterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button plain type="primary" icon="el-icon-search" @click="getScoreList">查询</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="showAddScoreDialog" style="float: right">添加成绩</el-button>
                </el-col>
            </el-row>
            <!-- 成绩列表区域 -->
            <el-table
                :data="scoreList"
                border stripe
                max-height="600px"
                :header-cell-style="table_header"
                empty-text="暂无数据"
            >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="stu_id" label="学号" align="center"></el-table-column>
                <el-table-column prop="student.name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="course.course_name" label="课程" align="center"></el-table-column>
                <el-table-column prop="score" label="分数" align="center"></el-table-column>
                <el-table-column prop="semester.name" label="学期" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑分数"
                                :enterable="false"
                                placement="top"
                        >
                            <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    circle
                                    @click="showEditScoreDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除分数"
                                :enterable="false"
                                placement="top"
                        >
                            <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    circle
                                    @click="removeScoreById(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
                    hide-on-single-page
            ></el-pagination>
        </el-card>
        <el-dialog
                :title="Dialog_title"
                :visible.sync="ScoreDialogVisible"
                width="50%"
                @close="resetForm('ScoreFormRef')"
                :close-on-click-modal="false"
        >
            <el-form
                    :model="scoreForm"
                    ref="ScoreFormRef"
                    :rules="ScoreFormRules"
                    label-width="100px">
                <el-form-item label="学号">
                    <el-select v-model="scoreForm.stu_id" filterable placeholder="请选择">
                        <el-option
                                v-for="stu_id in stu_id_list"
                                :key="stu_id"
                                :label="stu_id"
                                :value="stu_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分数">
                    <el-input v-model.number="scoreForm.score"></el-input>
                </el-form-item>
                <el-form-item label="课程">
                    <el-select v-model="scoreForm.course_id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in courseList"
                                :key="item.id"
                                :label="item.course_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期">
                    <el-select v-model="scoreForm.semester_id" filterable placeholder="请选择">
                        <el-option
                                v-for="item in semesterList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ScoreDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddOrUpdateScore">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                queryInfo: {
                    keyword: 'stu_id',
                    query: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页显示多少数据
                    pageSize: 10,
                    course_id: null,
                    semester_id: 5,
                },
                total: 0,

                ScoreDialogVisible: false,

                scoreList: [],
                semesterList: [],
                courseList: [],
                stu_id_list: [],

                scoreForm: {},
                ScoreFormRules: {
                    stu_id: [
                        {required: true, message: '请输入学号', trigger: 'blur'},
                    ],
                    course_id: [
                        {required: true, message: '请输入课程', trigger: 'blur'},
                    ],
                    score: [
                        {required: true, message: '请输入成绩', trigger: 'blur'},
                    ],
                    semester_id: [
                        {required: true, message: '请输入学期', trigger: 'blur'},
                    ],
                },
                Dialog_title: "",
                Dialog_state: "",
            }
        },
        created() {
            this.getScoreList();
            this.getSemesterList();
            this.getCourseList();
            this.getStuIDList();
        },
        methods: {
            table_header(row, column, rowIndex, columnIndex) {
                return 'background-color: #409EFF; color:white'
            },
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.getScoreList();
            },
            handleCurrentChange(newNum) {
                this.queryInfo.pageNum = newNum;
                this.getScoreList();
            },
            resetForm(formName) {
                this.scoreForm = {};
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
            },
            showAddScoreDialog() {
                this.Dialog_state = "add";
                this.Dialog_title = "添加成绩";
                this.ScoreDialogVisible = true
            },
            showEditScoreDialog(score) {
                this.Dialog_state = "edit";
                this.Dialog_title = "编辑成绩";
                this.scoreForm = score;
                this.ScoreDialogVisible = true
            },
            async getStuIDList() {
                const {data: res, status: status} = await this.axios.get('student/getStuIDList');
                if (status !== 200) {
                    return this.$message.error('获取学生列表失败！')
                }
                this.stu_id_list = res.data;
            },
            async getScoreList() {
                const {data: res, status: status} = await this.axios.get('score/getScoreList', {params: this.queryInfo});
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.scoreList = res.data.scores;
                this.total = res.data.total;
            },
            async getSemesterList() {
                const {data: res, status: status} = await this.axios.get("semester/getSemesterList");
                if (status !== 200) {
                    return this.$message.error('获取学期列表失败！')
                }
                this.semesterList = res.data.semesters;
            },
            async getCourseList() {
                const {data: res, status: status} = await this.axios.get('course/getCourseList');
                if (status !== 200) return this.$message.error("获取成绩列表失败");
                this.courseList = res.data.courses;
            },
            AddOrUpdateScore() {
                if (this.Dialog_state === "add") {
                    this.$refs.ScoreFormRef.validate(async valid => {
                        if (!valid) return;
                        const {data: res, status: status} = await this.axios.post('score/addScore', this.scoreForm);
                        if (status !== 200) {
                            this.$message.error('更新用户信息失败！')
                        }
                        this.$message.success('更新用户信息成功！');
                        this.getScoreList();
                        this.ScoreDialogVisible = false;
                    })
                } else {
                    this.ScoreForm.class = {};
                    this.ScoreForm.course = {};
                    this.ScoreForm.semester = {};
                    this.ScoreForm.student = {};
                    this.$refs.ScoreFormRef.validate(async valid => {
                        if (!valid) return;
                        const {data: res, status: status} = await this.axios.put('score/updateScore', this.scoreForm);
                        if (status !== 200) {
                            this.$message.error('更新成绩信息失败！')
                        }
                        this.$message.success('更新成绩信息成功！');
                        this.getScoreList();
                        this.ScoreDialogVisible = false;
                    })
                }
            },
            async removeScoreById(score_id) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该成绩, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err);
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: res, status: status} = await this.axios.delete('score/deleteScore', {params: {'id': score_id}});
                if (status !== 200) return this.$message.error('删除班级失败！');
                this.$message.success('删除成绩成功！');
                this.getScoreList();
            },
        }
    }
</script>
<style lang="less" scope>
</style>